<!--watch侦听-->
<script setup>
import {ref, watch} from 'vue'

const count = ref(0)
const addCount = () => {
  count.value++
}
// // 监听单个响应式数据的写法
// watch(count, (newCount, oldCount) => {
//   console.log('单个监听：新值：', newCount, '旧值：', oldCount)
// })

const name = ref("")
// // 添加immediate一进页面就执行
// watch([name, count], ([newName, newCount], [oldName, oldCount]) => {
//   console.log('多个监听：新值：', newName, newCount, '旧值：', oldName, oldCount)
// }, {immediate: true})

const obj = ref({key1: 1, key2: 2})
const changeKey2 = () => {
  obj.value.key2++
}
// // 添加deep 深度侦听
// watch(obj, (newObj, oldObj) => {
//   console.log(newObj, oldObj)
// }, {immediate: true, deep: true})

// 精确的监视对象中的某个值
// 语法：watch(()=>对象中的某个值，(newVal,oldVal)=>{执行某个方法})
watch(() => obj.value.key2, (n, o) => {
  console.log("新值：", n, "旧值：", o)
})
</script>
<template>
  <div>
    {{ count }}
    <button @click="addCount">+1</button>
    <hr>
    <input v-model="name" type="text"/>
    <hr>
    {{ obj.key1 }} -- {{ obj.key2 }}
    <button @click="changeKey2">只改key2</button>
  </div>
</template>
